import React from 'react';
import { connect } from 'dva';
import { Form, Input, Button, Alert, Divider, Select } from 'antd';
import router from 'umi/router';
import styles from './style.less';
import { identifyType } from '../../../../../common/selectOption';
import { phone, email } from '@/utils/regular';

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 18,
  },
};

@connect(({ createdForm, loading }) => ({
  submitting: loading.effects['createdForm/submitStepForm'],
  createdForm,
}))
@Form.create()
class Step2 extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      data: {},
    };
  }

  componentDidMount() {
    let step2 = localStorage.getItem('step2');
    let enterpriseDetail = localStorage.getItem('enterpriseDetail');
    if (step2) {
      this.setState({
        data: JSON.parse(step2),
      });
    } else if (enterpriseDetail) {
      this.setState({
        data: JSON.parse(enterpriseDetail),
      });
    }
  }

  render() {
    const { submitting, form } = this.props;
    const { getFieldDecorator, validateFields } = form;
    const { data } = this.state;
    const { location: { query } } = this.props;

    const onPrev = () => {
      router.push({
        pathname: '/preloan/enterprise/create/step1',
        query: query,
      });
    };
    const onNext = e => {
      e.preventDefault();
      validateFields((err, values) => {
        if (!err) {
          router.push({
            pathname: '/preloan/enterprise/create/step3',
            query: query,
          });
          localStorage.setItem('step2', JSON.stringify(values));
        }
      });
    };
    return (
      <Form layout="horizontal" className={styles.stepForm}>
        <Form.Item {...formItemLayout} label="企业法人" required={false}>
          {getFieldDecorator('legalName', {
            initialValue: data.legalName,
            rules: [{ required: true, message: '请输入法人名称' }],
          })(<Input type="text" placeholder="请输入法人名称"/>)}
        </Form.Item>
        <Form.Item {...formItemLayout} label="手机号" required={false}>
          {getFieldDecorator('mobile', {
            initialValue: data.mobile,
            rules: [
              { required: true, message: '请输入手机号！' },
              { pattern: phone, message: '请输入正确手机号' },
            ],

          })(<Input type="text" placeholder="请输入手机号"/>)}
        </Form.Item>
        <Form.Item {...formItemLayout} label="邮箱" required={false}>
          {getFieldDecorator('email', {
            initialValue: data.email,
            rules: [
              { required: true, message: '请输入邮箱号！' },
              { pattern: email, message: '请输入正确邮箱号' },
            ],
          })(<Input type="text" placeholder="请输入邮箱"/>)}
        </Form.Item>
        {/*<Form.Item {...formItemLayout} label="从业年限" >*/}
        {/*{getFieldDecorator("password", {*/}
        {/*initialValue: "123456"*/}
        {/*})(<Input type="text"/>)}*/}
        {/*</Form.Item>*/}
        <Form.Item {...formItemLayout} label="证件类型" required={false}>
          {getFieldDecorator('identifyType', {
            initialValue: data.identifyType,
            rules: [{ required: true, message: '请选择证件类型' }],
          })(
            <Select placeholder="请选择证件类型">
              {identifyType.map((item) => (
                <Select.Option value={item.key} key={item.key}>{item.value}</Select.Option>
              ))}
            </Select>,
          )}
        </Form.Item>
        <Form.Item {...formItemLayout} label="证件编号" required={false}>
          {getFieldDecorator('identifyNumber', {
            initialValue: data.identifyNumber,
            rules: [{ required: true, message: '请输入证件编号' }],

          })(<Input type="text" placeholder="请选择证件编号"/>)}
        </Form.Item>
        <Form.Item
          style={{ marginBottom: 8 }}
          wrapperCol={{
            xs: { span: 24, offset: 0 },
            sm: {
              span: formItemLayout.wrapperCol.span,
              offset: formItemLayout.labelCol.span,
            },
          }}
          label=""
        >
          <Button onClick={onPrev}>
            上一步
          </Button>
          <Button type="primary" onClick={onNext} loading={submitting} style={{ marginLeft: 8 }}>
            下一步
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

export default Step2;
